<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/columnPage/columnPageClassify' }">栏目页列表</el-breadcrumb-item>
            <el-breadcrumb-item>编辑栏目页列表</el-breadcrumb-item>
        </el-breadcrumb>

        <div style="margin-top: 24px;">
            <el-button size="small" type="primary" @click="backPage()">返回</el-button>
        </div>

        <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-top: 12px;">
            <el-tab-pane label="栏目页分类列表" name="one">
                <classify></classify>
            </el-tab-pane>
            <el-tab-pane label="轮播图列表" name="first">
                <banner></banner>
            </el-tab-pane>
            <el-tab-pane label="机经列表" name="second">
                <machineEconomy></machineEconomy>
            </el-tab-pane>
            <el-tab-pane label="新闻咨询" name="third">
                <journalism></journalism>
            </el-tab-pane>
            <el-tab-pane label="文章列表" name="fourth">
                <articles></articles>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import {
    addTeacherType, selectTeacherTypes
} from "../../api/userMG";
import Pagination from "../../components/Pagination";
import banner from '@/views/columnPage/banner'
import machineEconomy from "./machineEconomy.vue";
import journalism from "./journalism.vue";
import classify from "./classify.vue";
import articles from "./articles.vue";

export default {
    data() {
        return {
            activeName: 'one',
            loading: false, //是显示加载
            editFormVisible: false, //控制编辑页面显示与隐藏
            menuAccessshow: false, //控制数据权限显示与隐藏
            title: "添加",
            name: "",
            sort_order: "",
            // 删除
            seletedata: {
                ids: "",
                token: localStorage.getItem("logintoken"),
            },
            listData: [], //用户数据
            // 选中
            checkmenu: [],
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 10,
            },
            columnPageItem: {}
        };
    },
    // 注册组件
    components: {
        Pagination,
        banner,
        machineEconomy,
        journalism,
        classify,
        articles
    },
    /**
     * 数据发生改变
     */

    watch: {},

    /**
     * 创建完毕
     */

    created() {
        this.columnPageItem = JSON.parse(localStorage.getItem('columnPageItem'))
    },

    /**
     * 里面的方法只有被调用才会执行
     */

    methods: {
        backPage() {
            this.$router.go(-1);
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        },
        // 添加分类
        addCategory() {
            this.loading = true;
            addTeacherType({
                name: this.name,

            }).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisible = false
                    this.$message({
                        type: "success",
                        message: res.msg,
                    });
                    this.getdata();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        // 修改
        upCategory() {
            this.loading = true;
            upCategory({
                name: this.name,
                sort_order: this.sort_order,
                id: this.id,
            }).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisible = false
                    this.$message({
                        type: "success",
                        message: res.msg,
                    });
                    this.getdata();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },

        // 获取数据方法
        getdata() {
            this.loading = true;
            selectTeacherTypes().then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.listData = res.data.data;

                    return;
                }
                this.$message({
                    type: "info",
                    message: res.msg,
                });
            });
        },
        // 分页插件事件
        callFather(parm) {
            this.formInline.page = parm.currentPage;
            this.formInline.limit = parm.pageSize;
            this.getdata(parm.currentPage);
        },

        //显示编辑界面
        handleEdit: function (row) {
            console.log("row", row);
            this.editFormVisible = true;
            if (row != undefined && row != "undefined") {
                this.title = "修改";
                this.id = row.id;
                this.name = row.name;
                this.sort_order = row.sort_order;


            } else {
                this.title = "添加";
                this.name = "";
                this.sort_order = "";
            }
        },

        // 删除
        deleteCategory(index, row) {
            this.$confirm("确定要删除吗?", "信息", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteCategory({ id: row.id })
                        .then((res) => {
                            if (res.code == 200) {
                                this.$message({
                                    type: "success",
                                    message: "已删除！",
                                });
                                this.getdata();
                            } else {
                                this.$message({
                                    type: "info",
                                    message: res.msg,
                                });
                            }
                        })
                        .catch((err) => {
                            this.loading = false;
                            this.$message.error("删除失败，请稍后再试！");
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },

        // 关闭编辑、增加弹出框
        closeDialog(dialog) {
            if (dialog == "edit") {
                this.editFormVisible = false;
            } else if (dialog == "perm") {
                this.menuAccessshow = false;
            }
        },
    },
};
</script>

<style scoped>
.user-search {
    margin-top: 20px;
}

.userRole {
    width: 100%;
}
</style>